import React from 'react';
import './searchlist.css'
import { Link, useParams, useNavigate, Form } from "react-router-dom"
import { Tabs, InfiniteScroll, } from 'antd-mobile'
import { getSearchHome, getSearchCourse } from '../../api/home'


function Searchlist() {
    let navigate = useNavigate();//链接跳转
    let params = useParams()
    let [searchHome, SetSearchHome] = React.useState(null)
    let [searchCourse, SetSearchCourse] = React.useState(null)


    let [searchName, SetSearchName] = React.useState(null)
    let [key, Editkey] = React.useState(true)
    let [index, Editindex] = React.useState('one')


    let [Num, editNum] = React.useState(10)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)


    React.useEffect(() => {
        Editkey(localStorage.getItem("key"))
        getSearchHome(params.name, Num).then(data => {
            // console.log(params.name);
            console.log(data.data);
            SetSearchHome(data.data)
            if(localStorage.getItem("key") == 1){
                setPage(data.data.dishes.total)

            }else if(localStorage.getItem("key") == 2){
                setPage(data.data.material.total)
            }

            let value = params.name
            searchName = data.data.dishes.data.map(v => // 把匹配上的关键字加上 css 标签。原生里面 className 会被转成 class， 所以这里直接添加 class。
                v.title.replace(value, "<span class='red'>" + value + "</span>")
            )
            SetSearchName(searchName)

        })
        getSearchCourse(params.name, Num).then(data => {
            console.log(data.data);
            SetSearchCourse(data.data.data);
            if(localStorage.getItem("key") == 3){
                setPage(data.data.total)

            }

        })
    }, [])

    return searchHome && searchCourse ? (
        <div className='searchlist'>

            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>为你找到</div>
                <div className="right">
                </div>
            </div>

            <div className='tabs'>
                {searchCourse.length == 0 && searchHome.dishes.data.length == 0 || searchHome.material.data.length == 0 && searchHome.dishes.data.length == 0 || searchCourse.length == 0 && searchHome.material.data.length == 0 || key == 2 || key == 3 ? (
                    <>
                        {
                            key == 2 || key == 3 ? ("") : (<div className='goods-page'>
                                <div className='page-relate-list'>
                                    <div className='box'>
                                        <ul>
                                            {
                                                searchHome.dishes.data.map((item, index) => {
                                                    return (
                                                        <Link to={'/detailsvideo/' + item.dishes_id} key={item.dishes_id}>
                                                            <li>
                                                                <div className='img'>
                                                                    <img src={item.image} />
                                                                    <i className='ico'></i>
                                                                </div>
                                                                <div className='text'>
                                                                    <h6 dangerouslySetInnerHTML={{ __html: searchName[index] }}></h6>
                                                                    <div className="txt">{item.description}</div>
                                                                    <div className='bar'>
                                                                        <div className='rows'>
                                                                            <i className='icon icon-cook'></i>
                                                                            <span>难度：{item.hard_level}</span>

                                                                            {
                                                                                item.taste ? (<><div className='line'></div><i className='icon icon-taste'></i><span>口味：{item.taste}</span></>) : ("")
                                                                            }

                                                                        </div>
                                                                        <div className='rows'>
                                                                            <i className='icon icon-time'></i>
                                                                            烹饪时间：{item.cooking_time}
                                                                        </div>
                                                                    </div>
                                                                </div>


                                                            </li>
                                                        </Link>

                                                    )
                                                })
                                            }

                                        </ul>

                                    </div>
                                </div>
                            </div>)
                        }

                        {
                            key == 2 ? (<div className='food'>

                                {
                                    searchHome.material.data.map(items => {
                                        return (
                                            <div className='img' key={items.id}>
                                                <Link to={'/detailssort/' + items.id}>

                                                    <img src={items.image} />
                                                    <div className='name'>{items.title}</div>
                                                    <i className='icon'></i>
                                                    <div className='bg'></div>
                                                </Link>
                                            </div>
                                        )

                                    })
                                }


                            </div>) : ("")
                        }

                        {
                            key == 3 ? (<div className='recommend'>
                                <ul>
                                    {
                                        searchCourse && searchCourse.map((item, index) => {
                                            return (
                                                <li key={index}>
                                                    <Link to={'/detailscourse/' + item.series_id}>
                                                        <div className="img">
                                                            <img src={item.image} />
                                                        </div>
                                                        <div className="detail">
                                                            <span className="title">{item.name}</span>
                                                            <div className="img">
                                                                <img src={item.album_logo} />
                                                            </div>
                                                            <div className="album">
                                                                <span>更新至{item.episode_sum}集</span>
                                                                <span>上课人数：{item.play}</span>
                                                                <span className="name text_row_hidden">{item.album}</span>
                                                            </div>
                                                        </div>
                                                    </Link>

                                                </li>
                                            )
                                        })
                                    }

                                </ul>
                            </div>) : ("")
                        }

<InfiniteScroll loadMore={async () => {
                        setTimeout(() => {
                            Editflag(true)

                        }, 2000)
                        // console.log(flag);

                        // console.log(Num);
                        if (key == 1) {
                            Num += 3
                            editNum(Num)
                            await getSearchHome(params.name, Num).then(data => {

                                SetSearchHome(data.data)
                                let value = params.name
                                searchName = data.data.dishes.data.map(v => v.title.replace(value, "<span class='red'>" + value + "</span>")
                                )
                                SetSearchName(searchName)

                            })
                        } else if (key == 2) {
                            Num += 2
                            editNum(Num)
                            await getSearchHome(params.name, Num).then(data => {

                                SetSearchHome(data.data)

                            })
                        }
                        else if (key == 3) {
                            Num += 3
                            editNum(Num)
                            await getSearchCourse(params.name, Num).then(data => {
                                // console.log(data.data.data);
                                SetSearchCourse(data.data.data);

                            })
                        }

                        setTimeout(() => {
                            Editflag(false)

                        }, 2000)


                    }} hasMore={flag == false && Num < page}
                        threshold={50}
                    />
                    </>) : (<><Tabs activeKey={index} onChange={(key) => {
                        Editindex(key)
                        editNum(10)
                        if (key == "one") {
                            setPage(searchHome.dishes.total)


                        } else if (key == "two") {
                            setPage(searchHome.material.total)


                        } else if (key == "three") {
                            setPage(searchHome.course.total)
                            getSearchCourse(params.name, Num).then(data => {
                                console.log(data.data.data);
                                SetSearchCourse(data.data.data);
                    
                            })

                        };
                    }}>
                        {
                            searchHome.dishes.data.length == 0 ? ('') : (<Tabs.Tab title='推荐' key='one'>
                                <div className='goods-page'>
                                    <div className='page-relate-list'>
                                        <div className='box'>
                                            <ul>
                                                {
                                                    searchHome.dishes.data.map((item, index) => {
                                                        return (
                                                            <Link to={'/detailsvideo/' + item.dishes_id} key={item.dishes_id}>
                                                                <li>
                                                                    <div className='img'>
                                                                        <img src={item.image} />
                                                                        <i className='ico'></i>
                                                                    </div>
                                                                    <div className='text'>
                                                                        <h6 dangerouslySetInnerHTML={{ __html: searchName[index] }}></h6>
                                                                        <div className="txt">{item.description}</div>
                                                                        <div className='bar'>
                                                                            <div className='rows'>
                                                                                <i className='icon icon-cook'></i>
                                                                                <span>难度：{item.hard_level}</span>

                                                                                {
                                                                                    item.taste ? (<><div className='line'></div><i className='icon icon-taste'></i><span>口味：{item.taste}</span></>) : ("")
                                                                                }

                                                                            </div>
                                                                            <div className='rows'>
                                                                                <i className='icon icon-time'></i>
                                                                                烹饪时间：{item.cooking_time}
                                                                            </div>
                                                                        </div>
                                                                    </div>


                                                                </li>
                                                            </Link>

                                                        )
                                                    })
                                                }
                                                {/* <li>
                                                <div className='img'>
                                                    <img src='' />

                                                </div>
                                                <div className='text'>

                                                    <h6>蒜蓉菜心</h6>
                                                    <div className="txt">蒜蓉菜心</div>
                                                    <div className='bar'>
                                                        <div className='rows'>
                                                            <i className='icon icon-cook'></i>
                                                            难度：容易
                                                            <div className='line'></div>
                                                            <i className='icon icon-taste'></i>
                                                            口味：
                                                        </div>
                                                        <div className='rows'>
                                                            <i className='icon icon-time'></i>
                                                            烹饪时间：10分钟
                                                        </div>
                                                    </div>
                                                </div>


                                            </li> */}
                                            </ul>

                                        </div>
                                    </div>
                                </div>
                            </Tabs.Tab>)
                        }
                        {
                            searchHome.material.data.length == 0 ? ('') : (<Tabs.Tab title='食材' key='two'>
                                <div className='food'>

                                    {
                                        searchHome.material.data.map(items => {
                                            return (
                                                <div className='img' key={items.id}>
                                                    <Link to={'/detailssort/' + items.id}>

                                                        <img src={items.image} />
                                                        <div className='name'>{items.title}</div>
                                                        <i className='icon'></i>
                                                        <div className='bg'></div>
                                                    </Link>
                                                </div>
                                            )

                                        })
                                        // searchHome.material.data.length > 1 ? (<>
                                        //     {

                                        //         searchHome.material.data.map(items => {
                                        //             return (
                                        //                 <div className='img' key={items.id}>
                                        //                     <Link to={'/detailssort/' + items.id}>

                                        //                         <img src={items.image} />
                                        //                         <div className='name'>{items.title}</div>
                                        //                         <i className='icon'></i>
                                        //                         <div className='bg'></div>
                                        //                     </Link>
                                        //                 </div>
                                        //             )

                                        //         })
                                        //     }

                                        // </>) : (<div className='img'>
                                        //     <Link to={'/detailssort/' + searchHome.material.data[0].id}>
                                        //         <img src={searchHome.material.data[0].image} />
                                        //         <div className='name'>{searchHome.material.data[0].title}</div>
                                        //         <i className='icon'></i>
                                        //         <div className='bg'></div>
                                        //     </Link>
                                        // </div>)
                                    }


                                </div>
                            </Tabs.Tab>)
                        }

                        <Tabs.Tab title='课程' key='three'>
                            <div className='recommend'>
                                <ul>
                                    {
                                        searchCourse && searchCourse.map((item, index) => {
                                            return (
                                                <li key={index}>
                                                    <Link to={'/detailscourse/' + item.series_id}>
                                                        <div className="img">
                                                            <img src={item.image} />
                                                        </div>
                                                        <div className="detail">
                                                            <span className="title">{item.name}</span>
                                                            <div className="img">
                                                                <img src={item.album_logo} />
                                                            </div>
                                                            <div className="album">
                                                                <span>更新至{item.episode_sum}集</span>
                                                                <span>上课人数：{item.play}</span>
                                                                <span className="name text_row_hidden">{item.album}</span>
                                                            </div>
                                                        </div>
                                                    </Link>
                                                </li>
                                            )
                                        })
                                    }
                                    {/* <li>
                                    <div className='img'>
                                        <img src='' />
                                    </div>
                                    <div className="detail">
                                        <span className="title">123123</span>
                                        <div className="img">
                                            <img src='' />
                                        </div>
                                        <div className="album">
                                            <span>更新至123123集</span>
                                            <span>上课人数：123123</span>
                                            <span className="name text_row_hidden">22222</span>
                                        </div>
                                    </div>
                                </li> */}
                                </ul>
                            </div>
                        </Tabs.Tab>
                    </Tabs>
                        <InfiniteScroll loadMore={async () => {
                            setTimeout(() => {
                                Editflag(true)

                            }, 2000)
                            // console.log(flag);

                            // console.log(Num);
                            if (index == "one") {
                                Num += 3
                                editNum(Num)
                                await getSearchHome(params.name, Num).then(data => {

                                    SetSearchHome(data.data)
                                    let value = params.name
                                    searchName = data.data.dishes.data.map(v => v.title.replace(value, "<span class='red'>" + value + "</span>")
                                    )
                                    SetSearchName(searchName)

                                })
                            } else if (index == "two") {
                                Num += 2
                                editNum(Num)
                                await getSearchHome(params.name, Num).then(data => {

                                    SetSearchHome(data.data)

                                })
                            }
                            else if (index == "three") {
                                Num += 3
                                editNum(Num)
                                await getSearchCourse(params.name, Num).then(data => {
                                    // console.log(data.data.data);
                                    SetSearchCourse(data.data.data);

                                })
                            }

                            setTimeout(() => {
                                Editflag(false)

                            }, 2000)


                        }} hasMore={flag == false && Num < page}
                            threshold={50}
                        /></>
                )

                }
            </div>

        </div >
    ) : null



}


export default Searchlist;
